<template>
  <div class="divBox relative">
    <el-card class="box-card">
      <el-row :gutter="20" style="min-height:50px; padding: 0px 10px 0px 30px;">
        <el-form :inline="true" size="medium">
          <el-form-item label="查询条件">
            <el-select v-model="sended" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="getSms">查询</el-button>
              <el-button  @click="generateSms" style="margin-left: 20px;">生成短信提醒</el-button>
            </el-form-item>
        </el-form>
      </el-row>
    </el-card>
    <el-card class="box-card" style="margin-top: 15px;">
      <el-pagination
        layout="total,prev, pager, next"
        :current-page="tableData.page"
        :total="tableData.total"
        :page-size="tableData.limit"
        @current-change="pageChange"
      >
      </el-pagination>

      <el-table
        :data="tableData.records"
        style="width: 100%"
        :highlight-current-row="true"
        :header-cell-style=" {fontWeight:'bold'}"
      >
        <el-table-column
          type="index"
          width="50"
        >
        </el-table-column>
        <el-table-column
          prop="username"
          label="联系人"
          width="100"
        >
        </el-table-column>
        <el-table-column
          prop="phone"
          label="手机号码"
          width="120"
        >
        </el-table-column>
        <el-table-column
          label="发送时间"
          width="160"
        >
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.createTime) }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="提醒类型"
          width="120"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.type==1">常普常新提醒</span>
            <span v-if="scope.row.type==11">常普常新街道管理员提醒</span>
            <span v-if="scope.row.type==12">常普常新区管理员提醒</span>
            <span v-else-if="scope.row.type==2">隐患整改提醒</span>
            <span v-else-if="scope.row.type==21">隐患整改街道管理员提醒</span>
            <span v-else-if="scope.row.type==22">隐患整改区管理员提醒</span>
            <span v-else-if="scope.row.type==3">企业自查提醒</span>
            <span v-else-if="scope.row.type==31">企业自查街道管理员提醒</span>
            <span v-else-if="scope.row.type==32">企业自查区管理员提醒</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="content"
          label="短信内容"
        >
        </el-table-column>
        <el-table-column
          label="操作"
        >
          <template slot-scope="scope">
              <el-button v-if="scope.row.sended"> 已发送</el-button>
              <el-button v-else type="primary" @click="sendSms(scope.row)"> 发送</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

  </div>
</template>

<script>
import { smsList,sendSms,taskSend } from '@/api/safe'
export default {
  name: 'sms',
  data() {
    return {
      tableData: {
        records: [],
        page: 1,
        limit: 20,
        total: 0
      },
      options: [{
        value: 0,
        label: '全部'
      }, {
        value: 1,
        label: '未发送'
      }, {
        value: 2,
        label: '已发送'
      }],
      sended: 0
    }
  },
  mounted() {
    this.getSms()
  },
  methods: {
    pageChange(page) {
      console.log(page)
      this.tableData.page = page
      this.getSms()
    },
    getSms(){
      smsList(this.tableData.page,this.tableData.limit,this.sended).then(res=>{
        console.info(res)
        this.tableData.records=res.list
        this.tableData.page=res.page
        this.tableData.total=res.total
      }).catch(res=>{
        this.$message.error(res.message)
      })
    },
    generateSms(){
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      setTimeout(() => {
        loading.close();
      }, 40000);
      taskSend().then(res=>{
        this.$message.success("同步成功")
        this.getSms()
        loading.close();
      }).catch(res=>{
        this.$message.error(res.message)
        loading.close();
      })
    },
    sendSms(row){
      sendSms(row.id).then(res=>{
        console.info(res)
        this.getSms()
      }).catch(res=>{
        this.$message.error(res.message)
      })
    }
  }
}
</script>

<style scoped>

</style>
